<template>
	<el-row class="workspace">
		<el-col :span="12">
			<el-timeline>
				<el-timeline-item
					v-for="item in article"
					:key="item.time"
					:timestamp="dayjs(item.time).format('YYYY-MM-DD')"
					placement="top"
				>
					<el-card>
						<div v-for="ele in item.list" :key="ele.id" class="article">
							<h5 class="title">{{ ele.title }}</h5>
							<p class="content">{{ ele.desc }}</p>
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</el-col>
	</el-row>
</template>

<script setup>
import { getTimeArticleListApi } from '@/api/api.js'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'

let article = ref([])

onMounted(async () => {
	let res = await getTimeArticleListApi()
	Object.keys(res).forEach((item) => {
		article.value.push({
			time: item,
			list: res[item],
		})
	})
})
</script>

<style scoped>
.workspace {
	padding: 20px;
}
.article {
	padding: 10px;
}
.article .title {
	font-size: 16px;
	line-height: 2;
	border-bottom: 1px solid #eaeaea;
}
.article .content {
	font-size: 12px;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
